<template>
    <div>
        <el-dialog
        v-model="state.showDialog"
        destroy-on-close
        :title="title"
        draggable
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="769px"
      >
      <FormDesigner :controlGroups="controlGroups" :uploadOptions="uploadOptions" :formData="data"></FormDesigner>
    </el-dialog>
    </div>
</template>

<script lang="ts" setup name="patrol/form/formdesign">
  import { reactive, toRefs, getCurrentInstance, ref ,defineAsyncComponent} from 'vue'
  
  const FormDesigner = defineAsyncComponent(()=>import('/@/components/formdesigner/FormDesigner.vue'))

  defineProps({
    title: {
      type: String,
      default: '',
    },
  })
  const state = reactive({
    showDialog: false,
    sureLoading: false
  })


  // 打开对话框
  const open = async (row: any = {}) => {
        state.showDialog = true
    }


// 取消
const onCancel = () => {
  state.showDialog = false
}

let data = ref({});
data.value={
  "controls": [
    {
      "type": "textarea",
      "name": "多行文本",
      "key": "xNkeci7zl",
      "id": "textarea_xNkeci7zl",
      "lock": false,
      "dataType": "string",
      "props": {
        "width": 12,
        "showLabel": true,
        "label": "多行文本",
        "defaultValue": "",
        "placeholder": "",
        "required": false,
        "requiredMessage": "必填字段",
        "pattern": "",
        "patternMessage": "格式不正确",
        "disabled": false,
        "readonly": false,
        "showWordLimit": false,
        "maxlength": 50,
        "rows": 3,
        "autosize": false,
        "customClass": ""
      },
      "rules": [
        {
          "message": "必填字段",
          "required": false
        },
        {
          "message": "格式不正确"
        }
      ]
    }
  ],
  "props": {
    "labelPosition": "right",
    "labelWidth": 100,
    "size": "default",
    "customClass": "",
    "cols": 12
  }
}

let controlGroups = [
  {
    name: '基础组件',
    controls: ['input', 'textarea', 'inputnumber', 'select', 'radio', 'checkbox',
      'rate', 'color', 'date', 'time', 'switch', 'slider', 'text',  'link', 'divider']
  },
  {
    name: '高级组件',
    controls: ['upload', 'uploadImage', 'region', 'cascader', 'table','tab']
  },
];

let uploadOptions = {
  action: 'http://localhost:8888/api/Common/UploadFile',
  getHeaders: function () {
    return { 'token': '123' };
  },
  getFileHook: (res) => {
    if (res.success) {
      return {
        name: res.result.url.substr(res.result.url.lastIndexOf('/') + 1),
        url: res.result.url
      };
    } else {
      return res.msg;
    }
  }
}

  defineExpose({
    open,
  })
</script>